<template>
  <div class="tw-libmobiletabs"
    :class="[`x${_uid}`,`${type==='round'?'xround':''}`]"
    v-fix="sticky">
    <van-tabs
      v-model="active"
      :color="lineColor"
      :background="background"
      :line-height="lineHeight"
      :ellipsis="ellipsis"
      :sticky="sticky"
      @change="change()">
      <van-tab
        v-for="(tab, idx) in tabList"
        :key="idx"
        :title="tab.label">
        <template v-if="tab.href || tab.anchor" #title>
          <span>{{tab.label}}</span>
          <a v-if="tab.href" class="tw-libmobile-tab-link" :href="tab.href"></a>
          <a v-else v-lift="{callback:selectTab}" class="tw-libmobile-tab-link" :name="_uid" :data-target="`#${tab.anchor}`" :data-top="anchorTop" :data-arg="idx"></a>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'lib-mobile-tabs',

  mixins: [style],

  props,

  data() {
    return {
      active: 0,
      val: null,
      anchorTop: 0
    }
  },

  computed: {
    tabList () {
      const roleIdList = this.$twApp.user.roleIdList || []
      const result = JSON.parse(JSON.stringify(this.tabs))
      const list = []

      result.forEach(item => {
        if (!item.roles || roleIdList.filter((role) => item.roles.includes(role)).length > 0) {
          list.push(item)
        }
      })

      return list
    },

    style () {
      return {
        color: this.color,
        background: this.background,
        height: this.height,
        padding: this.padding,
        boxShadow: this.boxShadow,
        fontSize: this.tabFontSize,
        activeColor: this.activeColor,
        activeBg: this.activeBg
      }
    }
  },

  methods: {
    setValue (v) {
      const pathname = window.location.pathname
      let value = v

      for (const tab of this.tabs) {
        if (tab.href) {
          if (tab.activeText) {
            if (pathname.includes(tab.activeText)) {
              value = tab.value
            }
          } else if (pathname.includes(tab.href.replace(/^\./, ''))) {
            value = tab.value
          }
        }
      }

      if (value === '') {
        value = this.tabs[0].value
      }

      this.change(value)
    },

    setStyle () {
      const style = `
        ::root.tw-libmobiletabs .van-tabs {
          background: ${this.background};
        }

        ::root.tw-libmobiletabs .van-tab {
          color:  ${this.color};
          font-size: ${this.tabFontSize};
        }

        ::root.tw-libmobiletabs .van-tabs--line .van-tabs__wrap {
          height: ${this.height};
          padding: ${this.padding}
        }

        ::root.tw-libmobiletabs.xround .van-tab--active {
          color: ${this.activeColor};
          background: ${this.activeBg} !important;
          border-radius: ${parseInt(this.height) / 2 + (this.height + '').replace(/^\d+/, '')};
          box-shadow: ${this.boxShadow}
        }
      `

      this.addStyle(style)
    },

    change(value) {
      const val = value || this.tabs[this.active].value
      this.$emit('input', val)
      this.$emit('change', val)
    },

    setActiveTab () {
      if (this.val !== this.value) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].value === this.value) {
            this.val = this.value
            this.active = i
            break
          }
        }
      }
    },

    selectTab (idx) {
      this.active = parseInt(idx)
    }
  },

  created () {
    let v = this.value ? this.value : ''
    this.setValue(v)
    if (v) {
      this.setActiveTab()
    }
  },

  mounted () {
    this.anchorTop = parseInt(this.liftTop) ? parseInt(this.liftTop) : this.$el.offsetHeight
  },

  watch: {
    value () {
      this.setActiveTab()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
